﻿<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8,9,10" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>
        ul, li, pre {
            font-family: Tahoma;
            font-size: 12px;
        }

        li {
            list-style-type: none;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>


        function defaultFormat (data) {
            _format(data, false);
        };

        function customFormat(data) {
            _format(data, true);
        };

        //////////////

        function _format(data, customFormat) {
            try {
                var obj = $.parseJSON(data);

                var divViewer = $("#view");
                divViewer.html("");

                if (customFormat) {
                    _formatHumanFriendly(divViewer, null, obj);
                } else {
                    _formatAsUsual(divViewer, obj);
                }
            } catch (e) {
                alert("Failed to parse JSON data. Error: " + e.message);
            }
        }

        function _formatAsUsual(parentControl, obj) {
            var pre = $("<pre>");
            pre.html(JSON.stringify(obj, null, "\t"));
            parentControl.append(pre);
        }

        function _formatHumanFriendly(parentControl, name, obj) {
            if (_isSimpleType(obj)) {
                _renderItemOfSimpleType(parentControl, name, obj);
            } else {
                _renderObject(parentControl, name, obj);
            }
        }

        function _renderItemOfSimpleType(parentControl, name, value) {
            parentControl.append("<li><b>" + name + "</b>: " + value + "</li>");
        }

        function _renderObject(parentControl, name, obj) {
            if (parentControl.prop("tagName") == "UL") {
                var listItem = (name) ? $("<li><b>" + name + "</b>:</li>") : $("<li></li>");
                parentControl.append(listItem);
                parentControl = listItem;
            }

            var list = $("<ul></ul>");
            parentControl.append(list);

            var isArray = $.isArray(obj);
            for (var prop in obj) {
                var propName = isArray ? "[" + prop + "]" : prop;
                _formatHumanFriendly(list, propName, obj[prop]);
            }
        }

        function _isSimpleType(value) {
            if (value == null || value == undefined) {
                return true;
            }
            var type = typeof value;
            return (type === "string" || type === "number" || type === "boolean");
        }


    </script>
</head>
<body>
    <div id="view"></div>
</body>
</html>